"use client";
import { Button } from "@/components/ui/button";
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenu,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import Link from "next/link";
import { NavConfigData, NavList, NavDropdown } from "@/types/configData";
import { Fragment } from "react";
import { useTranslations } from "next-intl";

function BuildNavigation({ data }: { data: NavConfigData[] }) {
  const t = useTranslations();
  const navigationDOM = (
    resultLeft: React.ReactNode[],
    resultRight: React.ReactNode[]
  ) => {
    return (
      <NavigationMenu viewport={false} className="w-full max-w-none">
        <NavigationMenuList className="">{resultLeft}</NavigationMenuList>
        <div className="ml-auto">
          <NavigationMenuList>{resultRight}</NavigationMenuList>
        </div>
      </NavigationMenu>
    );
  };

  const navigationMenuLinkDOM = (data: NavConfigData) => {
    return (
      <NavigationMenuItem key={data.title + (data.href ?? "")}>
        <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
          <Link href={data.href ?? ""}>{t(data.title)}</Link>
        </NavigationMenuLink>
      </NavigationMenuItem>
    );
  };

  const navigationMenuDropDownDOM = (data: NavConfigData) => {
    return (
      <NavigationMenuItem key={`dropdown-${data.title}`}>
        <NavigationMenuTrigger>{t(data.title)}</NavigationMenuTrigger>
        <NavigationMenuContent className="absolute top-0 left-0 w-[160px]">
          <ul className="flex flex-col gap-1 p-2 min-w-[140px]">
            {((data.children as NavDropdown[]) ?? []).map((item, idx) => (
              <li key={`${data.title}-dropdown-${item.label}-${idx}`}>
                <NavigationMenuLink asChild>
                  <Button
                    variant="ghost"
                    className="w-full justify-start px-3 py-2 text-sm font-normal rounded-md 
                    hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
                    type="button"
                    onClick={() => data.fn?.(item)}
                  >
                    {item.label}
                  </Button>
                </NavigationMenuLink>
              </li>
            ))}
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
    );
  };

  const navigationMenuListDOM = (data: NavConfigData) => {
    return (
      <NavigationMenuItem key={`list-${data.title}`}>
        <NavigationMenuTrigger>{t(data.title)}</NavigationMenuTrigger>
        <NavigationMenuContent className="absolute top-0 left-0 w-[300px]">
          <ul className="grid w-[300px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
            {(data.children as NavList[]).map((item, idx) => (
              <ListItem
                key={`${data.title}-list-${item.title || idx}-${idx}`}
                navListData={item}
                onClick={() => data.fn?.(item)}
              />
            ))}
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
    );
  };

  const typeMap = (data: NavConfigData) => {
    switch (data.type) {
      case "link":
        return navigationMenuLinkDOM(data);
      case "dropdown":
        return navigationMenuDropDownDOM(data);
      case "list":
        return navigationMenuListDOM(data);
    }
  };

  const initData = (data: NavConfigData[]) => {
    if (data.length === 0) return <></>;
    const resultLeft = data
      .filter((item: NavConfigData) => item.align === "left")
      .map((item, index) => (
        <Fragment key={`left-${item.title}-${index}`}>
          {typeMap(item)}
        </Fragment>
      ));
    const resultRight = data
      .filter((item: NavConfigData) => item.align === "right")
      .map((item, index) => (
        <Fragment key={`right-${item.title}-${index}`}>
          {typeMap(item)}
        </Fragment>
      ));
    return navigationDOM(resultLeft, resultRight);
  };

  return <>{initData(data)}</>;
}

function ListItem({
  navListData,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { navListData: NavList }) {
  const t = useTranslations();
  return (
    <li {...props}>
      <NavigationMenuLink asChild className="cursor-pointer">
        <div>
          <div className="text-sm leading-none font-medium">
            {t(navListData.title)}
          </div>
          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
            {t(navListData.description)}
          </p>
        </div>
      </NavigationMenuLink>
    </li>
  );
}

export default BuildNavigation;
